import React from "react";
import {Animated, View} from "react-native";

export default class AnimView extends React.Component {
    state = {
        animValue: new Animated.Value(this.props.startValue),  // 透明度初始值设为0
    };

    isOpen = false;
    _startAnim = () => {
        this.isOpen = true;
        Animated.timing(                  // 随时间变化而执行动画
            this.state.animValue,            // 动画中的变量值
            {
                toValue: this.props.endValue,                   // 透明度最终变为1，即完全不透明
                duration: this.props.duration,              // 让动画持续一段时间
            }
        ).start();                        // 开始执行动画
    };

    _backAnim = () => {
        this.isOpen = false;
        Animated.timing(                  // 随时间变化而执行动画
            this.state.animValue,            // 动画中的变量值
            {
                toValue: this.props.startValue,                   // 透明度最终变为1，即完全不透明
                duration: this.props.duration,              // 让动画持续一段时间
            }
        ).start();                        // 开始执行动画
    };


    render() {
        return (
            <Animated.View                 // 使用专门的可动画化的View组件
                style={{
                    ...this.props.style,
                    transform: [{translateX: this.state.animValue}],
                }}
            >{this.props.children}
            </Animated.View>
        );
    }
}
